<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>查看用户</title>
		<link rel="stylesheet" href="layui/css/layui.css">
		<link rel="stylesheet" href="static/css/style.css">
		<style>
			.layui-table-cell {
				height: auto;
			}
		</style>
	</head>

	<body>
		<div class="container">
			<style>
				.layui-table .laytable-cell-checkbox {
					margin: 0px 20px;
				}
				
				.demoTable button:nth-of-type(2) {
					margin-left: 15px!important;
				}
			</style>
			<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
				<legend>查看用户</legend>
			</fieldset>
			<form class="layui-form">
				<div class="layui-form-item">
					<div class="layui-inline">
						<label class="layui-form-label">用户名</label>
						<div class="layui-input-inline namebox">
							<input type="text" name="nickname" lay-verify="nickname" placeholder="用户名" autocomplete="off" class="layui-input nickname" onblur="userlist();">
						</div>

						<label class="layui-form-label">用户手机号</label>
						<div class="layui-input-inline namebox">
							<input id="phone" name="phone" placeholder="用户手机号" autocomplete="off" class="layui-input phone" onblur="userlist();">
						</div>

						<label class="layui-form-label"></label>
						<div class="layui-input-inline namebox"></div>
						<button class="layui-btn seek" lay-submit lay-filter="formDemo" id="search" type="button">搜索</button>

					</div>
					<!--	<div class="layui-inline">
						<label class="layui-form-label">VIP状态</label>
						<div class="layui-input-inline">
							<select name="quiz" lay-filter="status">
								<option value=""></option>
								<option value="N">普通用户</option>
								<option value="Y">VIP用户</option>

							</select>
						</div>
					</div>-->

				</div>

			</form>
			<div class="layui-btn-group demoTable">
				<button type="button" class="layui-btn layui-btn-danger delet" data-type='getCheckData'><i class="layui-icon"></i>批量删除</button>
				<button type="button" class="layui-btn layui-btn-danger xinzeng" lay-event="del">新增用户</button>
			</div>
			<table id="demo" lay-filter="test"></table>
			<!--<div id="test1"></div>-->
			<script type="text/javascript" src="js/jquery.min.js"></script>
			<script src="js/common.js"></script>
			<script src="layui/layui.js"></script>
			<script src="layer-v3.1.1/layer/mobile/layer.js"></script>
			<script type="text/html" id="barDemo">
				<!--<a class="layui-btn layui-btn-danger layui-btn-xs layui-btn-normal " lay-event="query">修改用户</a>-->
				<a class="layui-btn layui-btn-danger layui-btn-xs layui-btn-normal " lay-event="del">删除用户</a>
			</script>
			<script type="text/html" id="barDemo2">
				<img src="{{d.head}}" />
			</script>
			<script>
				var list;
				var nickname = $('.nickname').val();
				//				var phone;
				var phone = $('.phone').val();
				var laypage;
				var element;
				$(function() {
					layui.use(['form', 'laypage', 'element'], function() {
						userlist("", "");
						form = layui.form;
						laypage = layui.laypage;
						element = layui.element //元素操作
						form.on('select(nickname)', function(data) {
							nickname = nickname;
							console.log(nickname);
							userlist($('.nickname'), $('.phone'));
						});
					
						form.on('select(phone)', function(data) {
							phone = data.value;
							console.log(phone);
							userlist($('.nickname'), $('.phone'));
						});

					})

					$("#search").click(function() {
						var nickname = $(".nickname").val();
						var phone = $(".phone").val();
						userlist(nickname, phone);
					})

				})

				function userlist(nickname, phone /*,  address*/ ) {

					$.ajax({
						type: "POST", //提交方式 
						url: baseurl + "/user/queryAll", //baseurl + "/com/users", //路径 
						dataType: 'json',
						data: {
							name: nickname,
							phone: phone
							/*,address: address,*/
							/*userType: userType,
							vip: vip,*/
						}, //数据，这里使用的是Json格式进行传输 
						success: function(data) { //返回数据根据结果进行相应的处理 
							list = data.data;
							layui.use('table', function() {
								var table = layui.table;
								//第一个实例
								table.render({
									elem: '#demo',
									id: 'testReload',
									toolbar: '#toolbarDemo',
									data: list, //数据接口
									limit: 10,
									limits: [10],
									page: true, //开启分页
									totalRow: true, //开启合计行
									cols: [
										[{
											type: 'checkbox',
											width: 20
										}, {
											field: 'id',
											title: 'ID',
											width: 200,
											totalRowText: '合计：',
											align: 'center',
										}, {
											field: 'name',
											title: '用户名称',
											width: 200,
											align: 'center',
										}, {
											field: 'phone',
											title: '手机号',
											width: 200,
											align: 'center',
										}, {
											field: 'head',
											title: '头像',
											width: 200,
											templet: '#barDemo2',
											event: 'aaaa',
											align: 'center',
											//											templet: '#barDemo3',
										}, {
											field: 'money',
											title: '账户余额',
											width: 200,
											sort: true,
											totalRow: true,
											align: 'center',
											//									templet: '#barDemo3',
										}, {
											field: 'userStatus',
											title: '用户身份',
											sort: true,
											width: 200,
											align: 'center',
											//											templet: '#barDemo3',
										}, {
											title: '操作',
											width: 200,
											toolbar: '#barDemo',
											align: 'center',
										}]
									]
								});
								element.on('tab(demo)', function(data) {
									layer.tips('切换了 ' + data.index + '：' + this.innerHTML, this, {
										tips: 1
									});
								});

								//批量删除
								$(".delet").click(function() { //获取选中的数据
									console.log(table.checkStatus("testReload"))
									var idList = [];
									var checkStatus = table.checkStatus("testReload"),
										data = checkStatus.data;

									if(data == "") {
										layer.msg('至少也得选一个吧', {
											icon: 2
										});
										return;
									}

									for(var i = 0; i < data.length; i++) {
										idList.push(data[i].id);
									}
									console.log(idList.push())
									layer.confirm('确认要删除吗？', function(index) {
										$.ajax({
											type: "post",
											url: baseurl + "/user/deleteUserAll",
											data: {
												"userId": idList.join()
											},
											success: function(data) {
												layer.msg('删除成功!', {
													icon: 1
												});
												$(".layui-form-checked").not('.header').parents('tr').remove();
											}
										});
									})
								})

								//新增
								$(".xinzeng").click(function() { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
									layer.open({
										type: 2,
										title: '新增用户',
										maxmin: true,
										shadeClose: true, //点击遮罩关闭层
										area: ['800px', '800px'],
										content: 'addUser.html' //?userId='+ userId
									});
								});

							
								//点击查看详情 跳出
								table.on('tool(test)', function(obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
									var data = obj.data; //获得当前行数据
									var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
									var tr = obj.tr; //获得当前行 tr 的DOM对象
									var userId = obj.data.id;
									var head = obj.data.head;
									if(layEvent === 'del') { //删除
										layer.confirm('确认要删除吗？', function(index) {
											$.ajax({
												type: "post",
												url: baseurl + "/user/deleteUserAll",
												data: {
													userId: userId,
												},
												success: function() {
													location.reload();
												}
											});
										})
									} else if(layEvent === 'aaaa') {
										layer.photos({
											photos: {
												"data": [ //相册包含的图片，数组格式
													{
														"alt": "用户头像",
														"pid": 666, //图片id
														"src": head, //原图地址
														"thumb": head //缩略图地址
													}
												],
											},
											anim: 3 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
										});
									}
								});
							});
						}
					});
				}
			</script>
	</body>

</html>